<template>
	<view class="page">
		<view style="display: flex;justify-content: space-between;" v-if="spotList.length > 0">
			<view class="heads_moeny">
				<span style="display: flex;align-items: center;">
					<p style="padding-top: 5px;">￥</p>
					<p style="font-size: 25px;">{{receiptAmount}}</p>
				</span>
				<span style="font-size: 12px;">已入账</span>
			</view>
			<view class="heads_moeny">
				<span style="display: flex;align-items: center;">
					<p style="padding-top: 5px;">￥</p>
					<p style="font-size: 25px;">{{unreportedAmount}}</p>
				</span>
				<span style="font-size: 12px;">未入账</span>
			</view>
		</view>
		<view class="heads" v-if="spotList.length > 0">
			<picker :range="spotList" range-key="shopname" @change="changePicker">
				<view class="flex align-center" style="gap:10rpx;">
					{{spotList[spotIndex].shopname}}
					<image class="xla" src="/static/images/xla.png"></image>
				</view>
			</picker>
		</view>
		<view class="conter">
			<picker mode="date" @change="changeTime($event,0)">
				<view>
					{{timeBetween[0]||'开始时间'}}
				</view>
			</picker>
			-
			<picker mode="date" @change="changeTime($event,1)">
				<view>
					{{timeBetween[1]||'结束时间'}}
				</view>
			</picker>
		</view>
		<view class="headstype">
			<view class="types" :class="stateType == 0 ?'click-type unverified':''" @tap="switchState(0)">未核销</view>
			<view class="types" :class="stateType == 1 ?'click-type verified':''" @tap="switchState(1)">已核销</view>
		</view>
		<!-- 订单列表 -->
		<view v-for="(order, okey) in list" :key="okey" class="order-item radius-bock">
			<view class="head">
				<view class="shop wanl-gray" @tap="onShop(order.shop_id)">
					<text class="wlIcon-dianpu1 wanl-black"></text>
					<text class="wanl-black margin-lr-xs text-30">{{
                  order.shop.shopname
                }}</text>
					<text class="wlIcon-fanhuigengduo text-sm"></text>
				</view>
				<view class="margin-right-bj text-sm">
					<text class="state" :style="{ color: order.stateTipColor }">{{
                  order.stateTip
                }}</text>
					<text v-if="order.state === 9" class="state" style="color: #e60012">待核销</text>
					<text v-if="order.state === 8" class="state"
						:style="order.cometime ? {color: '#888888'} : { color: '#e60012' }">{{orderText(order)}}</text>
				</view>
			</view>
			<!-- 商品 -->
			<view class="goods-box" v-for="(goods,index) in order.ordergoods" :key="index"
				@tap="orderDetails(order.id)">
				<view class="cu-avatar xl margin-right-bj radius" :style="{
                  backgroundImage:
                    'url(' + $wanlshop.oss(goods.image, 70, 70) + ')',
                }">
				</view>
				<view class="content margin-right-bj">
					<view class="describe">
						<view class="text-cut-2">
							{{ goods.title }}
						</view>
						<view class="wanl_sku text-min">
							<text class="wanl-gray-dark">{{ goods.difference }}</text>
						</view>
					</view>
					<view class="parameter">
						<view class="text-price text-sm text-black">
							{{ goods.price }}
						</view>
						<view class="text-min wanl-gray"> x {{ goods.number }} </view>

					</view>
				</view>
			</view>
			<view class="fonttext">
				<p>分佣收益：</p>
				<p style="color: red;">￥{{ order.pick_up_rake }}</p>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stateType:0,
				page: 1,
				totalPage: 1,
				list: [],
				spotList: [],
				spotIndex: 0,
				timeFilter: [],
				timeFilterIndex: 0,
				timeBetween: ['', ''],
				moreStatus: 'none',
				receiptAmount: 0,
				unreportedAmount: 0,
		
			};
		},
		onLoad() {
			// this.getSpot()
		},
		mounted() {
			let date = new Date()

			let Y = date.getFullYear()
			let m = (date.getMonth() + 1 + '').padStart(2, '0')
			let d = (date.getDate() + '').padStart(2, '0')

			// this.timeBetween = [
			// 	`${Y}-${m}-01`,
			// 	`${Y}-${m}-${d}`
			// ]

			this.getSpot()
		},
		onPullDownRefresh() {
			this.init()
		},
		onReachBottom() {
			this.getList()
		},
		methods: {
			switchState(type){
				const self = this;
				this.stateType = type
				console.log('dsadada',this.stateType);
				self.getList()
				setTimeout(function() {
				  
				}, 500);
				
			},
			changePicker(e) {
				console.log(e, '899898989');
				this.spotIndex = e.detail.value
				console.log('-=-=-=', this.spotIndex)
				// this.$forceUpdate()
				this.init()
			},
			changeTime(e, index) {
				this.timeBetween[index] = e.detail.value
				this.$forceUpdate()
				this.init()
				// console.log('-=-=-=e',e)
			},
			getSpot() {

				uni.request({
					url: '/wanlshop/order/pickupShop',
					success: res => {
						this.spotList = res.data
						this.spotList.unshift({
							shopname: '选择商家',
							id: ''
						})


						this.init()
					}
				})
			},
			init() {
				this.page = 1
				this.totalPage = 1
				this.getList()
			},
			getList() {
				console.log('-=-=-=list', )
				this.moreStatus = 'loading'
				let data = {
					start_time: this.timeBetween[0],
					end_time: this.timeBetween[1],
					type: this.stateType
				}

				if (this.spotIndex !== '') {
					data.shopId = this.spotList[this.spotIndex].id
				}
				uni.request({
					url: '/wanlshop/order/pickupStore',
					data: {
						page: this.page,
						...data
					},
					success: res => {
						console.log(res, '9888888888');
						this.receiptAmount = res.data.receiptAmount
						this.unreportedAmount = res.data.unreportedAmount
						let list = res.data.list
						this.list = list
						// this.page++
						// this.totalPage = res.data.last_page
						// console.log('-=-=-=list', list)
					},
					complete: t => {
						uni.stopPullDownRefresh()
						this.moreStatus = 'none'
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}

	.xla {
		width: 30rpx;
		height: 30rpx;
	}

	.page {
		padding: 20rpx;

		.heads {
			margin-top: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 92rpx;
			background: #2C4076;
			border-radius: 16rpx;
			color: white;
			gap: 25rpx;
		}

		.conter {
			margin-top: 20rpx;
			gap: 40rpx;
			display: flex;
			justify-content: center;

			.thisMonth {
				display: flex;
				align-items: center;
				gap: 20rpx;
			}
		}

		.contersun {
			background-color: #ffffff;
			border-radius: 16rpx;
			padding: 15rpx;
			margin-top: 20rpx;


			.contentLayout {
				margin-top: 20rpx;
				display: flex;
				gap: 20rpx;

				img {
					width: 180rpx;
					height: 180rpx;
				}

				.item-right {
					flex: 1;

					.bunns {
						font-weight: 400;
						font-size: 28rpx;
						color: #333;
						line-height: 40rpx;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.item-right-bottom {
						margin-top: 27rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						line-height: 38rpx;
					}

					>view {
						display: flex;
						justify-content: space-between;
					}
				}
			}

			.flexa {
				display: flex;
				justify-content: space-between;

				.text {
					display: flex;
					justify-items: center;
					align-items: center;

					img {
						width: 15rpx;
						height: 15rpx;
						margin-left: 10rpx;

					}
				}

				.text1 {
					margin-left: 20rpx;
					color: #b4b4b4;
				}

			}

		}

	}

	.order-item {
		display: flex;
		flex-direction: column;
		padding-left: 14px;
		background: #fff;
		margin-top: 14px;
	}

	.order-item .head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 45px;
	}

	.wanl-gray {
		color: #828282;
		margin-top: 11px;
	}

	.text-sm {
		font-size: 14px;
	}

	.margin-right-bj {
		margin-right: 14px;
	}

	.order-item .goods-box {
		display: flex;
		padding-top: 14px;
		padding-bottom: 14px;
	}

	.cu-avatar.xl {
		width: 73px;
		height: 73px;
		font-size: 2.5em;
	}

	.margin-right-bj {
		margin-right: 14px;
	}

	.order-item .goods-box .content {
		flex: 1;
		display: flex;
		justify-content: space-between
	}

	.margin-right-bj {
		margin-right: 14px;
	}

	.order-item .goods-box .content .parameter {
		width: 80px;
		text-align: right;
	}

	.fonttext {
		display: flex;
		justify-content: flex-end;
		padding-bottom: 14px;

		padding-right: 14px;
	}

	.heads_moeny {
		display: flex;
		flex-direction: column;
		width: 48%;
		align-items: center;
		height: 85px;
		background: #2C4076;
		border-radius: 8px;
		color: white;
		justify-content: center
	}

	.headstype {
		margin-top: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid #2C4076;
		height: 92rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		
	}

	.types {
		height: 100%;
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #2C4076;
	}
	.click-type{
		color: #ffffff;
		background-color: #2C4076;
	}
	.unverified{
		border-top-left-radius: 7px;
		border-bottom-left-radius: 7px;
	}
	.verified {
	    border-top-right-radius: 7px;
	    border-bottom-right-radius: 7px;
	}
</style>